<%@ page language="java" pageEncoding="UTF-8"%><!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<title>${initParam.WxAppName}</title>
		<link rel="stylesheet" href="${pageContext.request.contextPath}/bettery/js/jquery.confirm/jquery.confirm.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/bettery/css/life.css?v=5">
		<script type="text/javascript" src="${pageContext.request.contextPath}/dewei/js/jquery.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/bettery/js/jquery.confirm/jquery.confirm.js"></script>
		<script src="${pageContext.request.contextPath}/bettery/js/jquery-ui-1.10.4.custom.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/bettery/js/bettery_common.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/bettery/js/template.js"></script>
		<script type="text/javascript">
		var _lat;
		var _lng;
		function getConvertLatLng(lat, lng)
		{
			$.getJSON("../gpsparse.jsp",
			{
				lat : lat,
				lng : lng
			}, function(data)
			{
				if (data.error == 0)
				{
					_lat = data.lat;
			        _lng = data.lng;
					$("#hiddenbLng").val(data.lng);
					$("#hiddenbLat").val(data.lat);
				}
			});
		}
        </script>
	</head>
	<body>
	   
		<input type="hidden" value="${model.lat}" name='model.lat' id="hiddenLat" />
		<input type="hidden" value="${model.lng}" name='model.lng' id="hiddenLng" />
		<input type="hidden" value="${model.lat}"  id="hiddenbLat" />
		<input type="hidden" value="${model.lng}"  id="hiddenbLng" />
		<div class="WX_search WX_search_promote" id="mallHead">
			<form action="" method="get" class="WX_search_frm" onSubmit="">
				<input type="search" name="name" class="WX_search_txt" placeholder="搜索全部商品"  id="topSearchTxt"> 
			</form>
			<div class="WX_me">
				<a href="javascript:" id="topSearchbtn" class="WX_search_btn_blue Wx_Search_sbtn">搜索</a> 
			</div>
		</div>
		<div class="wx_nav">
			<a class="nav_index on" href="main.do">购物</a>
			<a class="nav_shopcart"  href="queryMyCar.do">购物车</a>
			<a class="nav_me"  href="queryUserAddr.do">个人中心</a>
		</div>
				<ul id="m1" class="rec_list_v2">
				</ul>
		</div>
<script id="test" type="text/html">
{{each list as value i}}
          <li skuid="" ynum="" qnum="" aid="" title="{{value.name}}">
            <a class="item" onclick="queryById({{value.id}})">
              
              <div class="img">
				{{if value.imgUrl}}
				<img  class="photo" src="{{value.imgUrl}}"></div>
				{{else}}  
				<img  class="photo" src="${pageContext.request.contextPath}/bettery/img/category.jpg"></div>
				{{/if}}
              <div class="info">
               <div class="name">【{{value.pinpai}}】{{value.name}}</div>
            
               <div class="price"><a class="bigzi" style="color:#f00;">￥{{value.cardprice}}</a>&nbsp;&nbsp;&nbsp;<a class="smallzi" style="text-decoration:line-through;color:#909090;">￥{{value.marketPrice}}</a></div> </div>
              </div>
              <div class="buy" onclick="queryById({{value.id}})"><span class="btn"  ptag="">立即抢购</span></div>
			  <p style="clear:both;"></p>
            </a>
          </li>
{{/each}}
</script>
<script>
	var lifeJson = ${json};
	var currentId=0;
	var data ={};
	$(function(){
		if(lifeJson.success){
			data = {list:lifeJson.result};
			currentId=lifeJson.currentId;
		}
		if(null!=lifeJson.result&&lifeJson.result.length>0)
		{
			var html = template('test', data);document.getElementById('m1').innerHTML = html;
		}
		$("#topSearchbtn").click(function(){
			$.ajax( {
					url : 'queryDatas.do',
					data:{name:$("#topSearchTxt").val()},
					type : 'post',
					dataType : 'json',
					success : function(data) {
						if (data.success) {
							lifeJson=data;
							data = {list:lifeJson.result};
			                currentId=lifeJson.currentId;
							if(null!=lifeJson.result&&lifeJson.result.length>0)
							{
								var html = template('test', data);document.getElementById('m1').innerHTML = html;
							}
						}else{
							alert("查询失败");
						}
					}
			});
		});
	});
	

	var myScroll,
		pullDownEl, pullDownOffset,
		pullUpEl, pullUpOffset,
		generatedCount = 0;

	function pullDownAction () {
		/*
		setTimeout(function () {
			var el, li, i;
			el = document.getElementById('m1');

			for (i=0; i<3; i++) {
				li = document.createElement('li');
				li.innerText = 'Generated row ' + (++generatedCount);
				el.insertBefore(li, el.childNodes[0]);
			}
			myScroll.refresh();
		}, 1000);
		*/
	}

	function pullUpAction () {
		setTimeout(function () {
			var el, li, i;
			el = document.getElementById('m1');
			$.ajax( {
					url : 'queryMore.do',
					data:{name:$("#topSearchTxt").val(),id:currentId},
					type : 'post',
					dataType : 'json',
					success : function(data) {
												if (data.success) {
							currentId=data.currentId;
							var img='${pageContext.request.contextPath}/bettery/img/category.jpg';
							for(var i=0;i<data.result.length;i++){
								var html='<a class="item" href=""><div style="display:" class="item_tag tag_red">正在抢购 <span style="display:none" yuyueid=""></span> </div>';
								html=html+'<div class="img">';
								if(data.result[i].imgUrl){
									html=html+'<img  class="photo" src="{{value.imgUrl}}" onerror="this.src=\''+img+'\'" ></div>';
								}else{
									html=html+'<img  class="photo" src="'+img+'" onerror="this.src=\''+img+'\'" ></div>';
								}
								html=html+'<div class="info"><div class="name">'+data.result[i].name+'</div>';
								html=html+'<div class="desc">'+data.result[i].pinpai+'</div>';
								html=html+'<div class="price">￥'+data.result[i].cardprice+' &nbsp;<a style="font-size: 12px;text-decoration:line-through;">'+data.result[i].marketPrice+'</a></div> </div>';
								html=html+'</div><div class="buy"><span class="btn" ptag="">立即抢购</span></div> </a>';
								li = document.createElement('li');
								li.innerHTML = html;
								el.appendChild(li, el.childNodes[0]);
							}
						}else if(!data.hasNext){
							pullUpEl.className = 'pullUpLabel';
							pullUpEl.querySelector('.pullUpLabel').innerHTML = '刷新完成，没有要加载的数据...';
						}
					}
			});
			
			myScroll.refresh();
		}, 1000);
	}

	function loaded() {
		pullDownEl = document.getElementById('pullDown');
		pullDownOffset = pullDownEl.offsetHeight;
		pullUpEl = document.getElementById('pullUp');	
		pullUpOffset = pullUpEl.offsetHeight;

		myScroll = new iScroll('wrapper', {
			useTransition: true,
			topOffset: pullDownOffset,
			onRefresh: function () {
				if (pullDownEl.className.match('loading')) {
					pullDownEl.className = '';
					pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
				} else if (pullUpEl.className.match('loading')) {
					pullUpEl.className = '';
					pullUpEl.querySelector('.pullUpLabel').innerHTML = '上划刷新...';
				}
			},
			onScrollMove: function () {
				if (this.y > 5 && !pullDownEl.className.match('flip')) {
					/*
					pullDownEl.className = 'flip';
					pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
					this.minScrollY = 0;
				} else if (this.y < 5 && pullDownEl.className.match('flip')) {
					pullDownEl.className = '';
					pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
					this.minScrollY = -pullDownOffset;
					*/
				} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
					pullUpEl.className = 'flip';
					pullUpEl.querySelector('.pullUpLabel').innerHTML = '上划刷新...';
					this.maxScrollY = this.maxScrollY;
				} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
					pullUpEl.className = '';
					pullUpEl.querySelector('.pullUpLabel').innerHTML = '上划刷新...';
					this.maxScrollY = pullUpOffset;
				}
			},
			onScrollEnd: function () {
				if (pullDownEl.className.match('flip')) {
					$("#pullDown").hide();
					/*
					pullDownEl.className = 'loading';
					pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';				
					pullDownAction();
					*/
				} else if (pullUpEl.className.match('flip')) {
					pullUpEl.className = 'loading';
					pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';				
					pullUpAction();	
				}
			}
		});
		setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
	}
	//document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
	//document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 100); }, false);
	
	function queryById(id){
		var lat=$("#hiddenbLat").val();
		var lng=$("#hiddenbLng").val();
		this.location.href="queryById.do?id="+id+"&lat="+lat+"&lng="+lng;
	}
</script>
		
	</body>
</html>